<template>
	<view class="u-page__item" v-if="tabbar?.list.length > 0">
		<su-tabbar :value="path" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
			:inactiveColor="tabbar.inactiveColor" :activeColor="tabbar.activeColor" :midTabBar="tabbar.mode === 2"
			:customStyle="tabbarStyle">
			<su-tabbar-item v-for="(item, index) in tabbar.list" :key="item.text" :text="item.text" :name="item.url"
				:badge="isShowImBadge(item)" :isCenter="getTabbarCenter(index)"
				:centerImage="sheep.$url.cdn(item.inactiveIcon,'ygb')" @tap="sheep.$router.go(item.url)">
				<template v-slot:active-icon>
					<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIcon,'ygb')"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.inactiveIcon,'ygb')"></image>
				</template>
			</su-tabbar-item>
		</su-tabbar>
	</view>
</template>

<script setup>
	import {
		computed,
		unref,
		watchEffect
	} from 'vue';
	import { onShow,onHide ,onUnload} from "@dcloudio/uni-app"
	import sheep from '@/sheep';
	const storeApp  = sheep.$store('app')
	const isShowImBadge = (item) => {
		// 若项目IM路径不同 需替换成自己项目的路径
		if (item.url === '/im/index') {
			return {
				show: sheep.$store('app').unreadNum >= 1 ? true : false,
				num: sheep.$store('app').unreadNum>0?'···':'',
			}
		}
		return {
			show: false,
			num: 0
		}
	}
	onShow(()=>{
		storeApp.openGetMsgNum()
	})
	onHide(()=>{
		storeApp.clearGetMsgNum()
	})
	onUnload(()=>{
		storeApp.unloadGetMsgNum()
	})

	const dotList = computed(() => {
		return sheep.$store('app').dotList;
	});
	const tabbar = computed(() => {
		return sheep.$store('app').template.basic?.tabbar;
	});
	watchEffect(()=>{
		if(tabbar.value?.list.length){
			storeApp.containIm = tabbar.value.list.some(tab=>tab.url=='/im/index')
			if(storeApp.containIm){
				storeApp.openGetMsgNum()
			}
		}
	})
	const tabbarStyle = computed(() => {
		const backgroundStyle = tabbar.value.background;
		if (backgroundStyle.type == 'color') return {
			background: backgroundStyle.bgColor
		};
		if (backgroundStyle.type == 'image')
			return {
				background: `url(${sheep.$url.cdn(
        backgroundStyle.bgImage,'ygb'
      )}) no-repeat top center / 100% auto`,
			};
	});

	const getTabbarCenter = (index) => {
		if (unref(tabbar).mode !== 2) return false;
		return unref(tabbar).list % 2 > 0 ?
			Math.ceil(unref(tabbar).list.length / 2) === index + 1 :
			false;
	};

	const props = defineProps({
		path: String,
		default: '',
	});
</script>

<style lang="scss">
	.u-page {
		padding: 0;

		&__item {
			&__title {
				color: var(--textSize);
				background-color: #fff;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: var(--textSize);
					font-size: 14px;
				}
			}

			&__slot-icon {
				width: 30px;
				height: 30px;
			}
		}
	}
</style>